<!-- 名片详情 -->
<template>

	<view class="card-detail ">
		<view class="card-detail-bg">
			<view style="position: relative;margin-bottom: 20rpx;">
				<image class="details-img" :src="dataForm.logo"></image>
				<view class="user-card">
					<image class="user-card-logo" :src="dataForm.headimgurl" mode=""></image>
					<view class="user-card-title">
						<view class="user-card-title-name">{{dataForm.name}}</view>
						<text class="user-card-title-zw">{{dataForm.duties}}</text>
					</view>
					<view class="user-info">
						<view class="user-info-item">
							<image class="user-info-img" src="../static/green/l-cp.jpg" mode=""></image>
							<view class="user-info-item-title">{{dataForm.company}}</view>
						</view>
						<view class="user-info-item">
							<image class="user-info-img" src="../static/green/l-adress.jpg" mode=""></image>
							<view class="user-info-item-title">{{dataForm.address}}68号</view>
						</view>
					</view>

					<view class="user-function">
						<view class="user-function-item">
							<image class="user-function-img" src="../static/green/l-gz.jpg" mode=""></image>
							<view class="">关注</view>

						</view>
						<view class="user-function-item" @click="collection">
							<image class="user-function-img" src="../static/green/l-f.jpg"
								v-if="dataForm.is_follow=='0'"></image>
							<image class="user-function-img" src="../static/green/l-sc.jpg" v-else></image>
							<view class="">{{dataForm.is_follow == 1?'已收藏':'收藏'}}</view>
						</view>
						<view class="user-function-item"  @click="onShare">
							<!-- <button class="share-btn" type="default" open-type='share'></button> -->
							<image class="user-function-img" src="../static/green/l-fs.jpg" mode=""></image>
							<view class="">发名片</view>
						</view>
					</view>

				</view>
			</view>

			<!-- 联系方式与介绍 -->
			<view class="box-d-s">
				<view class="flex-c-c">
					<view class="company-p-title">联系方式</view>
				</view>
				<view>
					<view class="d-t" v-for="(item,index) in list" :key='index'
						@click="onCopyContent(dataForm[item.value])">
						<view class="">{{item.name}} : {{dataForm[item.value]}}</view>
						<image class="d-t-img" :src="item.icon" mode=""></image>
					</view>
				</view>
				<view class="box-gn">
					<view class="box-gn-left flex-c-c">
						<button class="share-btn" type="default" open-type='share'></button>
						推荐给好友
					</view>
					<view class="box-gn-right flex-c-c" @click="addPhone(dataForm)">
						保存至通讯录
					</view>
				</view>
				<view class="card-details-b">
					<view class=" company-profile" v-if="dataForm.introduce">
						<view class="personal-pdlr30">
							<view class="flex-c-c">
								<view class="company-p-title">介绍</view>
							</view>
							<view class="" style="width: 100%;min-height: 200rpx;word-wrap:break-word">
								<rich-text selectable :nodes="dataForm.introduce"></rich-text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="video" v-if="dataForm.video">
				<view class="personal-pdlr30">
					<view class="flex-c-c">
						<view class="company-p-title">视频</view>
					</view>
					<view class="video-v">
						<video id="myVideo" :src="dataForm.video" :danmu-btn='false' enable-play-gesture controls
							object-fit='contain'></video>
					</view>
				</view>
			</view>
			<view class="d-image" v-if="dataForm.imgList">
				<view class="personal-pdlr30">
					<view class="flex-c-c">
						<view class="company-p-title">图片</view>
					</view>
					<image :src="el" mode="widthFix"  @click="onPreImg(index)" class="del-image" v-for="(el,index) in dataForm.imgList"
						:key='index'></image>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import cardMixin from '../mixins/index.js'
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		mixins: [cardMixin],
		data() {
			return {
				list: [{
						icon: require('../static/green/l-phone.jpg'),
						name: '电话',
						value: 'phone'
					},
					{
						icon: require('../static/green/l-email.jpg'),
						name: '邮箱',
						value: 'email'
					},
					{
						icon: require('../static/green/l-wx.jpg'),
						name: '微信',
						value: 'weixin'

					},
					{
						icon: require('../static/green/l-qq.jpg'),
						name: 'QQ	',
						value: 'qq'
					},

				],
			};
		},

	}
</script>

<style lang="scss" scoped>
	.card-detail {
		background-color: #f5f5f5;
		width: 100vw;
		min-height: 100vh;
	}

	.card-detail-bg {
		width: 100%;
		min-height: 400rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		position: relative;
		background-image: url("");
	}


	.details-img {
		position: relative;
		width: 690rpx;
		height: 700rpx;
		background: #000000;
		border-radius: 16rpx;
		margin: 0 auto ;
		
		opacity: .4;
	}



	.card-details {
		position: relative;
		padding-top: 1rpx;
		top: -200rpx;
		width: 100%;
		z-index: 30;
	}


	.company-p-title {
		display: inline-block;
		position: relative;
		padding: 40rpx 0;
		margin: 0 auto;
		font-size: 34rpx;
		font-family: PingFang;
		font-weight: 700;
		color: #222222;
	}

	.company-p-title::after {
		position: absolute;
		top: 50%;
		left: -100rpx;
		transform: translateY(-50%);
		content: '';
		width: 80rpx;
		height: 2rpx;
		background: #e4e4e4;
	}

	.company-p-title::before {
		position: absolute;
		top: 50%;
		right: -100rpx;
		transform: translateY(-50%);
		content: '';
		width: 80rpx;
		height: 2rpx;
		background: #e4e4e4;
	}



	.mt-30 {
		margin-top: 30rpx;
	}


	.del-image {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 20rpx;
	}



	.d-image {
		border-top: 10rpx solid #f5f5f5;
	}

	#myVideo {
		width: 100%;
		height: 100%;
	}

	video {
		width: 100%;
		height: 100%;
	}

	.personal-pdlr30 {
		border-radius: 16rpx;
		background-color: #fff;
		padding: 0 30rpx 45rpx;
		border-bottom: 24rpx solid #f5f5f5;
	}
	
	.personal-plr30 {
		border-radius: 16rpx;
		background-color: #fff;
		padding: 0 30rpx 45rpx;
	}


	.company-profile {
		background-color: #ffffff;
	}

	.video .personal-pdlr30 {
		border-bottom: 0;
	}



	.video-v {
		width: 100%;
		height: 388rpx;
		border-radius: 10rpx;
		background: #f4f4f4;
	}







	.follow-title {
		font-size: 24rpx;
	}

	.flex {
		display: flex;
	}

	.flex-c-sb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-c-c {
		display: flex;
		align-items: center;
		justify-content: center;
	}



	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}



	.share-btn {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		opacity: 0;
	}


	.user-card {
		position: absolute;
		width: 631rpx;
		background: #FFFFFF;
		bottom: 50rpx;
		left: 50%;
		padding: 70rpx 30rpx 27rpx;
		transform: translateX(-50%);
		border-radius: 16rpx;
		.user-card-logo {
			position: absolute;
			left: 51rpx;
			top: -55rpx;
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
		}

		.user-card-title {
			display: flex;
			align-items: baseline;
			margin-bottom: 25rpx;

			.user-card-title-name {
				display: inline-block;
				font-size: 50rpx;
				font-family: PingFangSC;
				font-weight: 700;
				color: #222222;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				max-height: 150rpx;
			}

			.user-card-title-zw {
				color: #fff;
				font-size: 24rpx;
				background: #46CDC6;
				padding: 3rpx 15rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
				max-width: 300rpx;
				height: 38rpx;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}

	.card-details-b {
		position: relative;
		padding: 0 30rpx;
	}

	.user-info {

		.user-info-item {
			display: flex;
			align-items: center;
			padding-bottom: 27rpx;

			.user-info-item-title {
				// width: 300rpx;
				flex: 1;
				word-break: break-all;
				// display: -webkit-box;
				// -webkit-line-clamp: 1;
				// -webkit-box-orient: vertical;
				// overflow: hidden;
			}

			.user-info-img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 15rpx;
			}
		}

		.user-info-item:nth-of-type(2) {
			border-bottom: 1rpx solid #E4E4E4;
		}

	}

	.user-function {
		display: flex;
		justify-content: space-around;
		margin-top: 22rpx;

		.user-function-item {
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			flex: 1;

			.user-function-img {
				width: 58rpx;
				height: 58rpx;
				margin-bottom: 17rpx;
			}
		}


	}

	.box-d-s {
		background-color: #fff;
	}

	.d-t {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-bottom: 48rpx;

		.d-t-img {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.box-gn {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;

		.box-gn-left {
			position: relative;
			width: 310rpx;
			height: 70rpx;
			background: #46CDC6;
			border-radius: 8rpx;
			color: #fff;
		}

		.box-gn-right {
			width: 310rpx;
			height: 70rpx;
			background: #FFFFFF;
			border: 1px solid #46CDC6;
			border-radius: 8rpx;
			color: #46CDC6;
		}
	}

	.box-bottom {
		background-color: #fff;
	}
</style>
